<template>
  <div>
    <el-select
      v-if="type === 'select'"
      :value="value"
      @change="input"
      v-bind="$attrs"
      v-on="$listeners"
      clearable
    >
      <el-option
        v-for="(item, index) in Object.entries(enums)"
        :key="index"
        :value="getValue(item[0])"
        :label="item[1]"
        allowClear
      >
        {{ item[1] }}
      </el-option>
    </el-select>
    <el-radio-group
      name="radioGroup"
      v-else-if="type === 'radio'"
      :value="value"
      v-bind="$attrs"
      @input="selectChange"
      v-on="$listeners"
    >
      <el-radio
        v-for="(item, index) in Object.entries(enums)"
        :key="index"
        :label="item[0]"
      >
        {{ item[1] }}
      </el-radio>
    </el-radio-group>
    <el-checkbox-group
      v-else
      :value="value"
      v-bind="$attrs"
      @input="selectChange"
      v-on="$listeners"
    >
      <el-checkbox
        :label="item[0]"
        v-for="(item, index) in Object.entries(enums)"
        :key="index"
      >
        {{ item[1] }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    value: [Object, Number, String, Boolean, Array],
    enums: {
      type: Object,
      require: true
    },
    type: {
      type: String,
      default: 'select'
    },
    valueIsNumber: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {

    }
  },
  methods: {
    getValue(val) {
      if (Number.isNaN(Number(val))) {
        return val
      }
      return this.valueIsNumber ? Number(val) : val
    },
    input(e) {
      console.log('e', e)
      this.$emit('input', e)
    },
    selectChange(e) {
      this.$emit('input', e)
    }
  }

}
</script>
